<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Grape Admin Tubes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/favicon.ico">
<link id="bs-css" href="bcs/css/bootstrap.min.css" rel="stylesheet">
<link href="css/charisma.app.css" rel="stylesheet">
<script src="bcs/js/jquery.min.js"></script>
<script src="bcs/js/bootstrap.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.history.js"></script>
<script src="js/autosize.min.js"></script>
<script src="js/charisma.app.js"></script>
<script src="js/highcharts.min.js"></script>
<script type="text/javascript">
	function createRow(stats) {
		var tsr = '<tr><td><a class="ajax-link" href="chart.html?tube='
				+ stats.tubeName
				+ '">'
				+ stats.tubeName
				+ '</a></td><td>'
				+ stats.delayQueueSize
				+ '</td><td>'
				+ stats.retainQueueSize
				+ '</td><td>'
				+ stats.failedQueueSize
				+ '</td><td>'
				+ '<a class="btn btn-danger" href="#" onclick="deleteTube(\''
				+ stats.tubeName
				+ '\')"><i class="glyphicon glyphicon-trash icon-white"></i> Delete</a>'
				+ '</td></tr>';

		$("#tubeStatsList").append(tsr);
	}

	function deleteTube(tubeName) {
		if (!tubeName) {
			return;
		}

		$.post("/api/tube/delete?tube=" + tubeName, function(data, status) {
			$(location).attr('href', "/index.html");
		}, "json");
	}

	$(document).ready(function() {

		// load stats
		$.getJSON("/api/tube/stats", function(data, status) {
			if (data) {
				$.each(data, function(i, ts) {
					createRow(ts);
				});
			}
		});

		// bind logout
		$("#logout").click(function() {
			$.getJSON("/api/authen/logout", function(data, status) {
				$(location).attr('href', "/login.html");
			});
		});

		$("form").submit(function(event) {
			event.preventDefault();

			var tn = $("#tube").val();
			if (!tn) {
				$("#tube").parent().addClass("has-error");
				return;
			} else {
				$("#tube").parent().removeClass("has-error");
			}

			$.post("/api/tube/create?tube=" + tn, function(data, status) {
				if (data) {
					$(location).attr('href', "/index.html");
				}
			}, "json");
		});
	});
</script>
</head>
<body>
	<div class="navbar navbar-default" role="navigation">
		<div class="navbar-inner">
			<button type="button" class="navbar-toggle pull-left animated flip">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="/"><img alt="Charisma Logo"
				src="img/logo20.png" class="hidden-xs" /><span>Grape</span></a>
			<!-- user dropdown starts -->
			<div class="btn-group pull-right">
				<button class="btn btn-default dropdown-toggle"
					data-toggle="dropdown">
					<i class="glyphicon glyphicon-user"></i><span
						class="hidden-sm hidden-xs"> admin</span> <span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a href="#">Profile</a></li>
					<li class="divider"></li>
					<li><a href="#" id="logout">Logout</a></li>
				</ul>
			</div>
			<!-- user dropdown ends -->
			<!-- theme selector starts -->
			<div class="btn-group pull-right theme-container animated tada">
				<button class="btn btn-default dropdown-toggle"
					data-toggle="dropdown">
					<i class="glyphicon glyphicon-tint"></i><span
						class="hidden-sm hidden-xs"> Change Theme / Skin</span> <span
						class="caret"></span>
				</button>
				<ul class="dropdown-menu" id="themes">
					<li><a data-value="classic" href="#"><i class="whitespace"></i>
							Classic</a></li>
					<li><a data-value="slate" href="#"><i class="whitespace"></i>
							Slate</a></li>
				</ul>
			</div>
			<!-- theme selector ends -->
		</div>
	</div>
	<div class="ch-container">
		<div class="row">
			<div id="content" class="col-lg-12 col-sm-10">
				<div>
					<ul class="breadcrumb">
						<li><a href="#">Home</a></li>
					</ul>
				</div>
				<div class="row">
					<div class="box col-md-12">
						<div class="box-inner">
							<div class="box-header well">
								<h2>
									<i class="glyphicon glyphicon-th"></i> Tube List
								</h2>
								<div class="box-icon"></div>
							</div>
							<div class="box-content" id="tubelist">
								<table
									class="table table-striped table-bordered bootstrap-datatable datatable responsive dataTable"
									id="DataTables_Table_0"
									aria-describedby="DataTables_Table_0_info">
									<thead>
										<tr role="row">
											<th class="sorting" role="columnheader" tabindex="0"
												aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
												style="width: 99px;">Tube Name</th>
											<th class="sorting" role="columnheader" tabindex="0"
												aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
												style="width: 99px;">Delay Size</th>
											<th class="sorting" role="columnheader" tabindex="0"
												aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
												style="width: 99px;">Retain Size</th>
											<th class="sorting" role="columnheader" tabindex="0"
												aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
												style="width: 99px;">Failed Size</th>
											<th class="sorting" role="columnheader" tabindex="0"
												aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
												style="width: 99px;">Action</th>
										</tr>
									</thead>
									<tbody id="tubeStatsList">
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="box col-md-12">
						<div class="box-inner">
							<div class="box-header well">
								<h2>
									<i class="glyphicon glyphicon-th"></i> Create Tube
								</h2>
								<div class="box-icon"></div>
							</div>
							<div class="box-content" id="tubeForm">
								<form action="#" method="post">
									<div class="form-group">
										<label>Tube Name (Globe Uniqueness) <i
											class="glyphicon glyphicon-star red"></i></label> <input type="text"
											class="form-control" name="tube" id="tube"
											placeholder="tube must match ^([a-z]|[A-Z])(\\w|-)*">
									</div>
									<button type="reset" class="btn btn-default">Reset</button>
									<button type="submit" class="btn btn-default">Submit</button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- content ends -->
			<!--/#content.col-md-0-->
		</div>
		<!--/fluid-row-->
		<hr>
		<footer class="row">
		<p class="col-md-9 col-sm-9 col-xs-12 copyright">&copy; 2019~2023 Grape
			Admin</p>
		<p class="col-md-3 col-sm-3 col-xs-12 powered-by">
			Powered by: <a href="http://usman.it/free-responsive-admin-template">Charisma</a>
		</p>
		</footer>
	</div>
	<!--/.fluid-container-->
</body>
</html>